<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>实体标注Cesium</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #cesiumContainer {
        width: 100vw;
        height: 100vh;
      }
      #cesiumContainer .cesium-viewer-bottom {
        /* 去除cesium logo */
        display: none;
      }
    </style>
    <link
      rel="stylesheet"
      href="../node_modules/cesium/Build/Cesium/Widgets/widgets.css"
    />
    <script src="../node_modules/cesium/Build/Cesium/Cesium.js"></script>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script>
      console.log(`
                        包依赖使用的是1.99的
                        中文官网: https://www.vvpstk.com/public/Cesium/Documentation/createWorldTerrain.html
                        `);
      console.log(Cesium);
      //   使用自己的密钥
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyY2RkZTQ4OS0wYzRlLTQyNmMtYmFjNy0zMzI3MWEwZmYwODIiLCJpZCI6MjMxODE5LCJpYXQiOjE3MjI0MTY0Mzh9.rRYOzcdNEqL45HmrFguJzNk2KCBb38afCpPyedi0bZ0";

      //   创建地图实例
      const viewer = new Cesium.Viewer("cesiumContainer", {});

      //  实体entity
      // 写法一
      //   const point = new Cesium.Entity({
      //     position: Cesium.Cartesian3.fromDegrees(120, 30),
      //     point: {
      //       pixelSize: 20,
      //     },
      //   });
      //   viewer.entities.add(point);

      // 写法二
      //   const point2 = viewer.entities.add({
      //     id: "point",
      //     position: Cesium.Cartesian3.fromDegrees(121, 30),
      //     point: {
      //       pixelSize: 20,
      //     },
      //   });

      //   标注
      const billboard = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(116, 40, 10),
        billboard: {
          image: "../1.jpg",
          scale: 0.3,
          color: Cesium.Color.BLUE,
        },
      });

      const label = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(112, 30),
        label: {
          text: "Cesium",
          fillcolor: Cesium.Color.YELLOWGREEN, //Cesium.Color.YELLOWGREEN这种就是命令好的
          showBackground: true,
          backgroundcolor: new Cesium.Color(255, 255, 0), //这才是创建颜色
        },
      });

      viewer.zoomTo(label);
    </script>
  </body>
</html>
